<template>
  <view class="details-Top"  >
    <image :src="phyInfoData.image" mode="aspectFill"></image>
    <view class="details-price">
      <text>{{phyInfoData.price}}</text>
      <text >已约{{phyInfoData.sales}}  </text>
    </view>
    <text class="details-Title">{{phyInfoData.title}}</text>
  </view>
  <!-- 预约时段 -->
  <view class="nucleic-time">
    <text class="nucleic-Title">体检时间选择</text>
    <scroll-view scroll-x="true" class="scroll-view_H">
      <view class="nucleic-time-flex">
        <block >
          <view :class="item.date==phyForm.phy_time?'active':''" @click="selDate(item)" v-for="item in phyInfoData.date" :key="item.date">
            <text>{{item.date}}</text>
            <text>{{item.week}}</text>
          </view>
        </block>
        
      </view>
    </scroll-view>
  </view>
  <!-- 适用人群 -->
  <view class="nucleic-time">
    <text class="nucleic-Title">适用人群</text>
    <view class="nucleic-crowd">
      <block >
        <view v-for="item in phyInfoData.crowd">
          <image :src="item.image" mode="aspectFill"></image>
          <text>{{item.name}}</text>
        </view>
      </block>
    </view>
  </view>
  <!-- 套餐项目 -->
  <view class="nucleic-time">
    <view class="nucleic-Title">套餐项目</view>
    <view class="project-view" v-for="item in phyInfoData.project">
      <block>
        <text class="project-Title">{{item.title}}</text>
        <view class="project-card" v-for="citem in item.content">
          <view>{{citem.thing}}</view>
          <view>{{citem.details}}</view>
        </view>
      </block>
    </view>
  </view>
  <!-- 提交 -->
  <view style="height:300rpx"></view>
  <view class="Total-view">
    <text >检测费用:{{phyInfoData.price}}</text>
    <text @click="toChange">选择成员</text>
  </view>
  <!-- 弹窗选择成员组件 -->
  <selPainterVue @sendPhy="toTakePhy" @sendFlag="getFlag" :flag="selFlag"></selPainterVue>
</template>

<script setup lang="ts">
	 import {getPhydateil,resPhyApi} from '@/api/user.js'
	 import selPainterVue from './selPainter.vue';
	 import {ref,reactive} from 'vue'
	 import {onLoad} from '@dcloudio/uni-app'
	 let phy_id=ref('')
	 onLoad((options)=>{
		 phy_id.value=options.id
		  getDetail();
	 })
	 
	 let phyInfoData=ref()
	 // 获取体检详情
	 let getDetail=async ()=>{
		 let res=await getPhydateil(phy_id.value)
		 console.log(res,"-------------详情-----------")
		 phyInfoData.value=res.data[0];
	 }
	 
	 // 控制选择成员弹出层的变量
	 let selFlag=ref(false)
		let toChange=()=>{
				console.log("你好")
			selFlag.value=true;
		
		}
		// 子传父的回调
		let getFlag=()=>{
			selFlag.value=false;
		}
	 let phyForm=reactive({
		  phy_name:"", //套餐名称
		  phy_time: "", //就诊时间
		  patient_id:"" //就诊人id
	 })
	 // 写页面  写效果   前后端交互（围绕接口干活）
	 
	 
	 // 选择时间
	 let selDate=(item)=>{
		 phyForm.phy_time=item.date;//收集日期
	 }
	 let toTakePhy=async (_id)=>{
		 console.log("触发事件")
		 phyForm.patient_id=_id;//就诊人id
		 phyForm.phy_name=phyInfoData.value.title;
		 console.log(phyForm,"准备体检数据")
		 if(phyForm.phy_time){
			 if(phyForm.patient_id){
				 let res=await resPhyApi(phyForm)
				 console.log(res,"----------预约体检")
				 wx.showToast({
					 title:"预约成功"
				 })
				 uni.navigateTo({
				 	url:"/pages/myphy/index"
				 })
			 }else{
				 uni.showToast({
				 	title:"请选择就诊人"
				 })
			 }
		 }else{
			 uni.showToast({
			 	title:"请选择时间"
			 })
		 }
		 
		 
	 }
</script>

<style>
  /* 表单提交 */
  @import url('../../common-style/form.css');
  /* 预约时间段 */
  @import url('../../common-style/nucleic-time.css');
  page{
    background-color: #fafafa;
  }
  /* 顶部 */
  .details-Top{
    background-color: #ffffff;
  }
  .details-Top image{
    width: 100%;
    height: 400rpx;
    display: block;
  }
  .details-price{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx;
  }
  .details-price text:nth-child(1){
    font-size: 35rpx;
    font-weight: bold;
    color: #ff5f2c;
  }
  .details-Title{
    padding: 0 0 20rpx 20rpx;
    display: block;
    font-weight: bold;
    font-size: 35rpx;
  }
  /* 适用人群 */
  .nucleic-crowd{
    display: flex;
    justify-content: space-between;
    padding-top: 20rpx;
  }
  .nucleic-crowd view{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .nucleic-crowd image{
    width: 100rpx;
    height: 100rpx;
    display: block;
    margin-bottom: 10rpx;
    border-radius: 10rpx;
  }
  /* 套餐项目 */
  .project-Title{
    background-color: #f0f2f8;
    display: block;
    border-radius: 10rpx;
    font-weight: bold;
    text-align: center;
    padding: 20rpx 0;
    margin: 20rpx 0;
  }
  .project-card{
    display: flex;
    flex-wrap: wrap;
  }
  .project-card view{
    margin: 5rpx;
    background-color: #f0f2f8;
    border-radius: 10rpx;
    padding: 20rpx 10rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .project-card view:nth-child(1){
    width: 200rpx;
    margin-left: auto;
  }
  .project-card view:nth-child(2){
    flex: 1;
    margin-right: auto;
  }
  /* 选中加上样式 */
  .checkstyle{
    background-color: #2c76ef !important;
    color: #ffffff !important;
  }
  .active{
	  background: skyblue;
  }
  </style>